<template>
      <el-scrollbar >
      <el-menu
                default-active="/"
                class="el-menu-demo"
                mode="horizontal"
                :ellipsis="false"
                router
      >
            <el-menu-item index="/"  @click="toIndex">
                  <img
                            style="width: 100px"
                            src="../assets/logo.svg"
                            alt="Element logo"
                  />
                  <h1>欢迎访问在线法律援助系统</h1>
            </el-menu-item>
            <div class="flex-grow" />
            <el-tooltip
                      effect="dark"
                      content="登录/退出"
            >
                   <el-menu-item index="/login" @click="toLogin" v-if="flag===0">登录</el-menu-item>
                   <el-menu-item index="/login" @click="logOut" v-else>{{ user.name  }}</el-menu-item>
            </el-tooltip>
            <el-menu-item index="/center">个人中心</el-menu-item>
            <el-sub-menu index="/operation">
                  <template #title>法律服务</template>
                  <el-menu-item index="/aidApply">援助申请</el-menu-item>
                  <el-menu-item index="/lawyerFind">律师服务</el-menu-item>
                  <el-menu-item index="/writApply">仲裁申请</el-menu-item>
                  <el-sub-menu index="2-4">
                        <template #title>申请记录</template>
                        <el-menu-item index="/myAid">援助申请</el-menu-item>
                        <el-menu-item index="/myLawyer">委托申请</el-menu-item>
                        <el-menu-item index="/myWrit">仲裁申请</el-menu-item>
                  </el-sub-menu>
            </el-sub-menu>
<!--            <el-sub-menu index="/operation" v-else>-->
<!--                  <template #title>我的工作</template>-->
<!--                  <el-menu-item index="/aidApply">援助指派</el-menu-item>-->
<!--                  <el-menu-item index="/lawyerFind">委托申请</el-menu-item>-->
<!--            </el-sub-menu>-->
      </el-menu>
      </el-scrollbar>
</template>

<script>
export default {
      name: "header",
      data(){
                  return{
                        user:{
                              name:'default'
                        },
                        flag:0
                  }
            },
      methods:{
            toIndex(){
                  this.$router.push("/")
                  console.log("数据源："+JSON.parse(sessionStorage.getItem('CurUser')));
                  this.user=JSON.parse(sessionStorage.getItem('CurUser'))
            },
            toLogin(){
                  this.$router.push("/login")
            },
            logOut(){
                  JSON.parse(sessionStorage.clear())
                  this.$router.push("/login")
            },
            init(){
                  this.user = JSON.parse(sessionStorage.getItem('CurUser'))
                  console.log("this.user========="+this.user)
                  this.flag=JSON.parse(sessionStorage.length)
            }
      },
      created() {
            this.init()
      }
}
</script>

<style >
      .flex-grow {
            flex-grow: 1;
      }
</style>